<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>事件对象</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#red {
				width: 400px;
				height: 400px;
				background-color: red;
			}

			#blue {
				width: 200px;
				height: 200px;
				background-color: blue;
			}

			#yellow {
				width: 100px;
				height: 100px;
				background-color: yellow;
			}

		</style>
	</head>
	<body>

		<div id="red">
			<div id="blue">
				<div id="yellow"></div>
			</div>
		</div>
		
	</body>
</html>
<script>
	
	// target和currentTarget区别
	var redDiv = document.getElementById('red');
	var blueDiv = document.getElementById('blue');
	var yellowDiv = document.getElementById('yellow');

	redDiv.onclick = function(e) {
		// 事件对象: 包含了事件的详细信息
		// target: 事件的目标对象(事件刚开时触发时发生在哪个元素上)
		console.log(e.target);
		// 当前事件对象(当前事件绑定的元素	)
		console.log(e.currentTarget);
	};

	blueDiv.onclick = function(e) {
		console.log(e.target);
		console.log(e.currentTarget);
	};

	yellowDiv.onclick = function(e) {
		console.log(e.target);
		console.log(e.currentTarget);
		// e.stopPropagation();
	};






</script>